<template>
	<view class="sign-exchange">
		<view class="exchange-list">
			<!-- <view class="exchange-item">
				<view class="item-header">
					<text class="item-name">积分抽奖</text>
					<text class="click-state" @click.stop="goWriteAddress">请填写地址</text>
				</view>

				<view class="item-date">时间：2022-11-03 10:17:31</view>

				<view class="item-content">
					<image class="item-img" src="../../static/logo.jpg" mode="widthFix"></image>
					<view class="item-content-right">
						<view class="item-content-title">新款Apple/苹果 iPhone 13</view>
						<view class="item-content-nums">x1</view>
					</view>
				</view>
			</view>

			<view class="exchange-item">
				<view class="item-header">
					<text class="item-name">积分抽奖</text>
					<view class="click-state" @click.stop="goWriteWechart">请填写微信号</view>
				</view>

				<view class="item-date">时间：2022-11-03 10:17:31</view>

				<view class="item-content">
					<image class="item-img" src="../../static/sign/cash.png" mode="widthFix"></image>
					<view class="item-content-right">
						<view class="item-content-title">8.88元现金红包</view>
						<view class="item-content-nums">x1</view>
					</view>
				</view>
			</view> -->

			<view class="exchange-item" v-for="(item, index) in lotteryList" :key="index">
				<view class="item-header">
					<text class="item-name">积分抽奖</text>
					<view class="item-state">已完成</view>
				</view>

				<view class="item-date">时间：{{item.createTime}}</view>

				<view class="item-content">
					<image class="item-img" :src="'https://biapi.vaubang.cn' + item.cover" mode="aspectFit"></image>
					<view class="item-content-right">
						<view class="item-content-title">{{item.productName}}</view>
						<view class="item-content-nums">x1</view>
					</view>
				</view>
			</view>

			<view class="no-data-tip" v-if="lotteryList.length == 0">
				<image class="no-data-icon" src="../../static/no-data.png" mode="widthFix"></image>
				<text class="no-data-text">无抽奖记录</text>
			</view>
		</view>
		<uni-load-more v-show="isLoadMoreShow" :status="lotteryMore" :content-text="contentText" />
		<view class="height"></view>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	export default {
		data() {
			return {
				isLoadMoreShow: true,
				rqsData: {
					"pageSize": 5,
					"pageIndex": 1,
					"orderBy": "asc"
				},
				lotteryList: [],
				lotteryMore: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},
		onLoad() {
			this.getLotteryRecord();
		},
		methods: {
			goWriteWechart() {
				uni.navigateTo({
					url: "/packageA/workbench/wechart-info-write"
				})
			},
			goWriteAddress() {
				uni.navigateTo({
					url: "/packageA/workbench/address-write"
				})
			},
			// 获取抽奖记录
			getLotteryRecord() {
				getApp().showLoading();
				apiRqs._getLotteryRecord(this.rqsData).then((res) => {
					uni.hideLoading();
					console.log('抽奖记录', res);
					if (res.code == 200) {
						let newData = JSON.parse(JSON.stringify(res.data.data));
						if (newData.length < this.rqsData.pageSize) {
							if (newData.length == 0) {
								this.isLoadMoreShow = false;
							}
							this.lotteryMore = 'nomore';
						} else {
							this.lotteryMore = 'more';
						}
						this.lotteryList = this.lotteryList.concat(newData);
					}
				})
			},
		},
		onReachBottom() { //上拉触底函数
			console.log('滑到底啦！');
			if (this.lotteryMore == 'more') { //此处判断，上锁，防止重复请求
				this.rqsData.pageIndex += 1;
				this.getLotteryRecord();
			}
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.sign-exchange {
		.uni-load-more {
			margin-top: 10px;
		}

		.height {
			height: 20px;
		}

		.exchange-list {
			.exchange-item {
				margin: 20px 20px 0px 20px;
				padding: 20px;
				box-sizing: border-box;
				background: #fff;
				border-radius: 4px;

				.item-header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-name {
						font-size: 16px;
						color: rgba(0, 0, 0, 0.9);
						font-weight: 500;
					}

					.item-state {
						font-size: 14px;
						color: rgba(0, 0, 0, 0.7);
						margin-left: 10px;
					}

					.click-state {
						font-size: 12px;
						color: #fff;
						background-color: #008aff;
						padding: 5px 10px;
						border-radius: 40px;
						margin-left: 10px;
					}
				}

				.item-date {
					font-size: 12px;
					color: rgba(0, 0, 0, 0.5);
					margin-top: 10px;
				}

				.item-content {
					display: flex;
					margin-top: 20px;

					.item-img {
						width: 55px;
						height: 55px;
						flex: 0 0 55px;
					}

					.item-content-right {
						flex: 1;
						min-width: 0;
						margin-left: 20px;

						.item-content-title {
							font-size: 14px;
							color: #000;
							font-weight: 500;
						}

						.item-content-nums {
							font-size: 14px;
							color: rgba(0, 0, 0, 0.4);
							margin-top: 6px;
						}
					}
				}
			}

			.no-data-tip {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 200rpx;

				.no-data-icon {
					width: 280rpx;
				}

				.no-data-text {
					font-size: 24rpx;
					color: #999;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
